<script setup lang="ts">
import {useRouter} from 'vue-router'

const router = useRouter()
const handleSelect = (key: string) => {
  router.push(key)
}
const handleBack = () => {
  router.push('home')
}
</script>

<template>
  <el-container>
    <el-header class="header-class">
      <el-page-header title="HOME" @back="handleBack">
        <template #content>欢迎使用MAX-UI</template>
        <template #extra>
          <el-menu mode="horizontal" :ellipsis="false" @select="handleSelect">
            <el-menu-item index="web">接口调试</el-menu-item>
            <el-menu-item index="db">数据连接</el-menu-item>
          </el-menu>
        </template>
      </el-page-header>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<style scoped>
.header-class {
  border-bottom: 1px solid var(--el-menu-border-color);
}
</style>